import React from 'react'
import ReactDOM from 'react-dom'

import PropTypes from 'prop-types'
class App extends React.Component {
  state = {
    num: '叶树森',
  }
  render() {
    return (
      <>
        <Mycard title={'1'} options={{ label: 11, value: '222' }}>
          <div>鸡腿真好吃</div>
        </Mycard>
        <Mycard title={'美景'}>
          <div>白云山</div>
        </Mycard>
        <hr />
        <hr />
        <hr />
        <CareFun>
          {/* <CareFun title={111}> */}
          <div>子节点</div>
        </CareFun>
      </>
    )
  }
}
class Mycard extends React.Component {
  // 校验准则
  static propTypes = {
    title: PropTypes.string,
    // children:PropTypes.func
    // children:PropTypes.node
    // children:PropTypes.any
    // 特定结构的对象
    options: PropTypes.shape({
      value: PropTypes.string,
      label: PropTypes.number,
    }),
  }
  // 默认值，如果不传，pageSize==10
  static defaultProps = {
    pageSize: 10,
  }
  render() {
    return (
      <>
        <h1>{this.props.title}</h1>
        <h2>{this.props.children}</h2>
      </>
    )
  }
}

function CareFun({ title, children }) {
  return (
    <div>
      <h3>标题：{title}</h3>
      <section>{children}</section>
    </div>
  )
}
CareFun.propTypes = {
  title: PropTypes.string.isRequired,
}
CareFun.defaultProps = {
  pageSize: 100,
}
//函数组件的校验是写在函数外部的 static类的静态成员
ReactDOM.render(<App />, document.getElementById('root'))
